<template>
  <div style="height: 100%; width: 100%">
    <div style="text-align: center; margin: 10px">
      <img src="@/assets/img/little_icon/xmgl.png" style="margin-left: 30%" />
      <div style="float: right; width: 63%; text-align: left">
        <span>项目管理统计图表</span>
      </div>
    </div>

    <div style="width:104%;margin-left:-2%" class="T1">
      <table border="0" style="width: 100%; text-align: center">
        <tr>
          <td colspan="2"><img src="@/assets/img/little_icon/xmgs.png" /> <span style="color:#fff;font-weight:600">项目数（个）</span></td>
          <td colspan="2"><img src="@/assets/img/little_icon/xmhts.png" /> <span style="color:#fff;font-weight:600">项目合同数（个）</span></td>
          <td colspan="2"><img src="@/assets/img/little_icon/xmze.png" /> <span style="color:#fff;font-weight:600">项目总额（万元）</span></td>
        </tr>
        <tr>
          <td colspan="2" style="color:yellow">{{ fromData.totle }}</td>
          <td colspan="2" style="color:yellow">{{ fromData.totle }}</td>
          <td colspan="2" style="color:yellow">{{ fromData.totle }}</td>
        </tr>
        <tr>
          <td colspan="3" ><img src="@/assets/img/little_icon/xmhkze.png" /> <span style="color:#fff;font-weight:600;margin-top:-10px">项目回款总额</span></td>
          <td colspan="3" ><img src="@/assets/img/little_icon/xmhkze.png" /> <span style="color:#fff;font-weight:600">项目回款总额</span></td>
        </tr>
        <tr>
          <td colspan="3" style="color:yellow">{{ fromData.totle }}</td>
          <td colspan="3" style="color:yellow">{{ fromData.totle }}</td>
        </tr>
      </table>
    </div>

    <div style="text-align: center; margin: 10px">
      <img src="@/assets/img/little_icon/xmgl1.png" style="margin-left: 30%" />
      <div style="float: right; width: 63%; text-align: left">
        <span>项目管理统计图表</span>
      </div>
    </div>

    <div style="height: 30%; width:104%;margin-left:-2%" class="T1">
      <div id="xmgltjt" ></div>
    </div>
    <div style="text-align: center; margin: 10px 30%;height:5%" class="t2">&nbsp;
      <!-- <img src="@/assets/img/little_icon/xmje.png" style="margin-left: 30%" />
      <div style="float: right; width: 63%; text-align: left">
        <span>项目金额TOP5</span>
      </div> -->
    </div>

    <div style="width: 100%; height: 30%;">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        highlight-current-row
      >
        <el-table-column prop="date" label="排名" width="150">
        </el-table-column>
        <el-table-column prop="name" label="项目名称"> </el-table-column>
        <el-table-column prop="address" label="项目金额（万元）">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProItem",
  data() {
    return {
      fromData: {
        totle: 0,
        percentage: "+0.22%",
      },
      tableData: [],
    };
  },
  mounted() {
    this.drawLineXMTJ();
  },
  methods: {
    drawLineXMTJ() {
      let myChart = this.$echarts.init(document.getElementById("xmgltjt"));
      myChart.clear(); //清除旧数据
      myChart.resize({
        width: "350px",
        height: "200px",
      });
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "25%",
          right:"20%",
          right: "right",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "建筑工程" },
              { value: 735, name: "EPC工程" },
              { value: 580, name: "PPP工程" },
              { value: 484, name: "专项工程" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.s {
  background-color: aquamarine;
}
.T1{
  background: url("../../assets/img/bgImg/B1.png");
}
.t2{
  background: url("../../assets/img/bgImg/xmje.png") no-repeat;
}
</style>